<script setup>
import { userLoginUserStore } from "@/store/user";
import { reactive, ref } from "vue";
import { updateMyUserUsingPost } from "@/api/userController";
import { useRouter } from "vue-router";
import message from "@arco-design/web-vue/es/message";
import { IconEdit, IconPlus } from "@arco-design/web-vue/es/icon";
const loginUserStore = userLoginUserStore();
const router = useRouter();
const isxs = ref(false);
const form = reactive({
  userPassword: "",
  userName: "",
  userProfile: "",
});
const visible = ref(false);
const aaa = () => {
  isxs.value = !isxs.value;
};
const file = ref();

const onChange = (_, currentFile) => {
  file.value = {
    ...currentFile,
    // url: URL.createObjectURL(currentFile.file),
  };
};
const onProgress = (currentFile) => {
  file.value = currentFile;
};
const updateMyUserUsingPostData = async () => {
  const res = await updateMyUserUsingPost(form);
  if (res.data.code === 0) {
    message.success("修改成功" + res.data.message);
    if (form.userPassword !== "") {
      deleteUser();
    }
  }
};
const handleSubmit = () => {
  updateMyUserUsingPostData();
};
const deleteUser = () => {
  loginUserStore.deleteLoginUser();
  router.push("/");
};
const onSuccess = (response) => {
  if (response.response.code === 0) {
    message.success("上传成功");
    loginUserStore.loginUser.userAvatar = response.response.data;
    visible.value = false;
  }
};

const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};

const showChange = () => {
  visible.value = true;
};
</script>

<template>
  <div class="bg">
    <div class="container">
      <div class="top">
        <div class="top-top">
          <a-avatar
            trigger-type="mask"
            @click="showChange"
            :image-url="loginUserStore.loginUser.userAvatar"
            :size="120"
            style="margin: 30px"
          >
            <template #trigger-icon>
              <span style="font-size: 10px">修改头像</span>
            </template>
            {{ loginUserStore.loginUser.userName ?? "无名" }}
          </a-avatar>
          <div class="right">
            <h1>{{ loginUserStore.loginUser.userName ?? "无名" }}</h1>
            <p>{{ loginUserStore.loginUser.userProfile }}</p>
            <a-breadcrumb>
              <a-breadcrumb-item>Home</a-breadcrumb-item>
              <a-breadcrumb-item>Home</a-breadcrumb-item>
              <a-breadcrumb-item>Channel</a-breadcrumb-item>
              <a-breadcrumb-item>News</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
        </div>
        <div class="btton">
          <a-breadcrumb style="margin-left: 30px">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>Channel</a-breadcrumb-item>
            <a-breadcrumb-item>News</a-breadcrumb-item>
          </a-breadcrumb>
          <a-button type="outline" style="margin: 30px" @click="aaa"
            >修改资料</a-button
          >
        </div>
      </div>
      <div class="bottom" v-if="isxs">
        <a-form
          :model="form"
          :style="{ width: '600px' }"
          @submit="handleSubmit"
        >
          <a-form-item field="name" label="密码">
            <a-input v-model="form.userPassword" placeholder="请输入新密码" />
          </a-form-item>
          <a-form-item field="post" label="姓名">
            <a-input v-model="form.userName" placeholder="请输入昵称" />
          </a-form-item>
          <a-form-item field="post" label="简介">
            <a-textarea
              v-model="form.userProfile"
              placeholder="请输入简介"
              :max-length="100"
              allow-clear
              show-word-limit
            />
          </a-form-item>
          <a-form-item>
            <a-button html-type="submit">提交</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 上传头像 </template>
    <div>
      <a-space direction="vertical" :style="{ width: '100%' }">
        <a-upload
          :with-credentials="true"
          action="http://localhost:8101/api/user/update/myload"
          :fileList="file ? [file] : []"
          :show-file-list="false"
          @change="onChange"
          @progress="onProgress"
          :onSuccess="onSuccess"
        >
          <template #upload-button>
            <div
              :class="`arco-upload-list-item${
                file && file.status === 'error'
                  ? ' arco-upload-list-item-error'
                  : ''
              }`"
            >
              <div
                class="arco-upload-list-picture custom-upload-avatar"
                v-if="file && file.url"
              >
                <img :src="file.url" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
                <a-progress
                  v-if="file.status === 'uploading' && file.percent < 100"
                  :percent="file.percent"
                  type="circle"
                  size="mini"
                  :style="{
                    position: 'absolute',
                    left: '50%',
                    top: '50%',
                    transform: 'translateX(-50%) translateY(-50%)',
                  }"
                />
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                  <div style="margin-top: 10px; font-weight: 600">Upload</div>
                </div>
              </div>
            </div>
          </template>
        </a-upload>
      </a-space>
    </div>
  </a-modal>
</template>

<style scoped>
.bg {
  width: 100%;
  height: 1000px;
  margin-top: -10px;
  background: linear-gradient(to bottom, #f1f1f1, white);
}
.container {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  padding-top: 20px;
}
.top {
  width: 100%;
  height: 300px;
  background: white;
  border-radius: 20px;
}
.top-top {
  display: flex;
}
.right {
  margin-top: 20px;
  margin-left: 20px;
}
.btton {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100px;
  margin-top: 20px;
}
.bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
  margin-top: 20px;
  background: white;
  border-radius: 20px;
  transition: all 1s;
}
</style>
